<script setup lang='ts'>
import { useGetEnterpriseInfo, useGetServiceCategory } from '@fl/api/man-api'
import { SearchForm } from '@fl/components'
import { cascaderValueToString } from '@fl/utils/tree'
import { cloneDeep } from 'lodash-es'
import { inject, ref, watchEffect } from 'vue'
import type { OptionsType } from 'plus-pro-components'

const { data: serviceCategoryOptions } = useGetServiceCategory()

const supplierId: any = inject('supplierId')
const secondType: any = inject('secondType')
const type: any = inject('type')
const id: any = inject('id')

const state = {
    accountName: '',
    accountNumber: '',
    bankName: '',
    cat: [],
    contactCardNo: '',
    contactMobile: '',
    contactName: '',
    enterpriseName: '',
    establishmenDate: '',
    legalCard: '',
    legalMobile: '',
    legalRepresentative: '',
    logo: '',
    registeredAddress: '',
    registeredCapital: '',
    unifiedSocialCreditCode: '',
}

const form = ref(cloneDeep(state))

const group: any = [
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '统一社会信用代码',
                prop: 'unifiedSocialCreditCode',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '公司名称',
                prop: 'enterpriseName',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '法定代表人',
                prop: 'legalRepresentative',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '成立日期',
                prop: 'establishmenDate',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '注册资本',
                prop: 'registeredCapital',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 24,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '注册地址',
                prop: 'registeredAddress',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 24,
                },
                label: '企业LOGO',
                prop: 'logo',
                valueType: 'img',
            },
        ],
        title: '工商信息(数据来源于企查查)',
    },
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '姓名',
                prop: 'legalRepresentative',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '电话',
                prop: 'legalMobile',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '身份证号码',
                prop: 'legalCard',
                valueType: 'copy',
            },
        ],
        title: '法人信息',
    },
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '姓名',
                prop: 'contactName',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '电话',
                prop: 'contactMobile',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '身份证号码',
                prop: 'contactCardNo',
                valueType: 'copy',
            },
        ],
        title: '联系人信息',
    },
    {
        columns: [
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '开户名',
                prop: 'accountName',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '开户行',
                prop: 'bankName',
                valueType: 'copy',
            },
            {
                colProps: {
                    span: 8,
                },
                fieldProps: {
                    disabled: true,
                },
                label: '银行账号',
                prop: 'accountNumber',
                valueType: 'copy',
            },
        ],
        title: '账户信息',
    },
]

const finalGroup: any = computed(() => {
    // TODO: 二级分类 厂家
    if (secondType === '8') {
        return [
            ...group,
            {
                columns: [
                    {
                        colProps: {
                            span: 24,
                        },
                        fieldProps: {
                            disabled: computed(() => type === 'view'),
                            props: { multiple: true },
                        },
                        label: '服务类别',
                        options: serviceCategoryOptions as OptionsType,
                        prop: 'cat',
                        valueType: 'cascader',
                    },

                ],
                title: '产品服务',
            },
        ]
    }
    return group
})

const { data, isLoading } = useGetEnterpriseInfo(supplierId)

watchEffect(() => {
    if (data.value) {
        form.value = {
            ...data.value.jcEnterpriseInfoPart,
            cat: data.value?.jcEnterpriseInfoPart.cat && JSON.parse(data.value?.jcEnterpriseInfoPart.cat),
        }
    }
})

function getParams() {
    const { cat } = form.value

    return {
        cat: JSON.stringify(cat),
        catName: cascaderValueToString(cat, {
            treeData: serviceCategoryOptions.value,
        }),
        enterpriseId: supplierId,
        id,
    }
}

defineExpose({
    getParams,
})
</script>

<template>
    <div class="w-full">
        <SearchForm v-model="form"
                    v-loading="isLoading"
                    :group="finalGroup"
                    :has-footer="false"
                    label-position="top"
        >
            <template #plus-field-logo>
                <ElImage :src="form.logo"
                         class="size-100"
                />
            </template>
        </SearchForm>
    </div>
</template>

<style lang="less" scoped></style>
